<template>
  <div>
    <a-menu
      style="width: 256px"
      :defaultSelectedKeys="['1']"
      :defaultOpenKeys="['sub1']"
      mode="inline"
      theme="dark"
      :selectedKeys="[current]"
      @click="handleClick"
    >
      <a-sub-menu v-for="folder in storyData" :key="folder.id">
        <span slot="title">
          <div v-if='editingId == folder.id'> 
            <a-input size="large" placeholder="请输入文件夹名称" v-model="dirname" />
          </div>
           <div v-else>
             <a-icon type="folder" />
          <span>{{folder.filename}}</span>
          </div>
        </span>
        <a-menu-item v-for="file in folder.children" :key="file.id" @click="onClick($event,file)">
          <div v-if='editingId == file.id'>
             <a-input size="large" @blur='onFileBlur' placeholder="请输入文件名称" v-model="name" />
          </div>
          <div v-else>
             <a-icon type="file-markdown" />
              {{file.filename}}
          </div>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import { Menu, Icon , Input } from "ant-design-vue";
Vue.use(Menu);
Vue.use(Icon);
Vue.use(Input);
interface fileConfig {
    isFolder: boolean;
    filename: string;
    createAt: Date;
    path: string;
    id: string;
    body: string;
    children?:[]
  }

@Component
export default class MenuItem extends Vue {
  @Prop() storyData?: Array<object>;
  private editingId:string = ''
  private name:string = ''
  private dirname:string = ''
  @Emit("click-file")
  onClick(event: any, file: fileConfig) {
    this.editingId = file.id
    this.name = file.filename
    return file.id;
  }
  onFileBlur(){
    this.editingId =''
    this.name = ''
  }

  current: string = "1";
  handleClick(e: any) {
    this.current = e.key;
  }
}
</script>

<style scoped>
</style>